<template>
<el-dialog class="add-dialog user-add-dialog" :title="addForm.title" :append-to-body="true" :close-on-click-modal="false" :visible.sync="addForm.show" width="470px">
    <el-form ref="ruleForm" :model="addForm.form" :rules="rules" label-width="100px">
        <el-form-item label="用户名" prop="username">
            <el-input clearable placeholder="请输入用户名" v-model="addForm.form.username"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名" prop="realname">
            <el-input autocomplete="new-password" clearable placeholder="请输入真实姓名" v-model="addForm.form.realname"></el-input>
        </el-form-item>
        <!-- <el-form-item label="性别" prop="ssex"> -->
        <el-form-item label="性别">
            <el-radio v-model="addForm.form.ssex" label="0">男</el-radio>
            <el-radio v-model="addForm.form.ssex" label="1">女</el-radio>
            <el-radio v-model="addForm.form.ssex" label="2">保密</el-radio>
        </el-form-item>
        <el-form-item v-if="addForm.title==='新增用户'" prop="password" label="密码">
            <el-tooltip class="item" effect="dark" content="新用户默认密码为 admin123456" placement="top">
                <el-input autocomplete="new-password" clearable show-password type="password" v-model="addForm.form.password"></el-input>
            </el-tooltip>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
            <el-input clearable placeholder="请输入邮箱" v-model="addForm.form.email"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="mobile">
            <el-input clearable placeholder="请输入手机号" v-model="addForm.form.mobile"></el-input>
        </el-form-item>
        <el-form-item label="角色" prop="roleId">
            <el-select v-model="addForm.form.roleId" multiple placeholder="请选择角色">
                <el-option
                    v-for="(item, key) in roleList"
                    :key="key"
                    :label="item.roleName"
                    :value="item.roleId">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="部门">
            <el-select ref="treeDepSelect" popper-class="deptSelectDown" clearable v-model="addForm.form.deptId" placeholder="请选择部门">
                <el-option
                    :label="deptLabel"
                    :value="addForm.form.deptId">
                    <el-tree
                        class="scroll-bar tree-box"
                        ref="deptTree"
                        node-key="id"
                        :check-strictly="true"
                        :props="labelProp"
                        :data="depList"
                        @node-click="nodeClick">
                    </el-tree>
                </el-option>
            </el-select>
        </el-form-item>
        <!-- <el-form-item label="状态" prop="status"> -->
        <el-form-item label="状态">
            <el-radio v-model="addForm.form.status" label="0">锁定</el-radio>
            <el-radio v-model="addForm.form.status" label="1">有效</el-radio>
            <!-- <el-radio v-model="addForm.form.status" label="2">未分配</el-radio>
            <el-radio v-model="addForm.form.status" label="3">已注销</el-radio> -->
        </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="addForm.show=false">取 消</el-button>
      <el-button type="primary" @click="handleSave">确 定</el-button>
    </span>
</el-dialog>
</template>

<script>
export default {
    name: 'AddDialog',
    props: {
        addForm: {
            type: Object,
            required: true
        }
    },
    data () {
        var validatePass = (rule, value, callback) => {
            var type = 0
            if (!value) {
                this.addForm.form.password = 'admin123456'
                callback()
            }
            if (value.includes('_')) {
                type++
            }
            if (/\d+/.test(value)) {
                type++
            }
            if (/[a-zA-Z]+/.test(value)) {
                type++
            }
            if (type < 2 || value.length <= 8) {
                callback(new Error('请输入由字母、数字、下划线至少2类组成的8位以上密码'))
            } else {
                callback()
            }
        }
        return {
            labelProp: {
                label: 'title'
            },
            deptLabel: '',
            depList: [],
            roleList: [],
            rules: {
                password: [
                    { validator: validatePass, trigger: 'blur' }
                ],
                email: [
                    { required: true, message: '请输入邮箱', trigger: 'blur' },
                    { pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/, message: '只允许英文字母、数字、下划线、英文句号、以及中划线组成' }
                ],
                mobile: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    { pattern: /^1(3|4|5|7|8)\d{9}$/, message: '手机号码格式有误，请重新输入' }
                ],
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 4, max: 10, message: '长度在 4 到 10 个字符', trigger: 'blur' }
                ],
                realname: [
                    { required: true, message: '请输入真实姓名', trigger: 'blur' },
                    { min: 1, max: 10, message: '真实姓名不能超过10个字符', trigger: 'blur' }
                ],
                roleId: [
                    { required: true, message: '请选择角色', trigger: 'blur' }
                ]
                // status: [
                //     { required: true, message: '请选择状态', trigger: 'change' }
                // ],
                // ssex: [
                //     { required: true, message: '请选择性别', trigger: 'change' }
                // ]
            }
        }
    },
    mounted () {
        this.getDeps()
    },
    methods: {
        getInitDeptLabel (data, deptId) {
            for (let i = 0, l = data.length; i < l; i++) {
                if (data[i].id === deptId) {
                    this.deptLabel = data[i].text
                }
                if (data[i].children) {
                    this.getInitDeptLabel(data[i].children, deptId)
                }
            }
        },
        nodeClick (target, node) {
            this.addForm.form.deptId = target.id
            this.deptLabel = target.title
            this.$refs.treeDepSelect.blur()
        },
        handleSave () {
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {
                    this.$emit('save')
                } else {
                    return false
                }
            })
        },
        getDeps () {
            // 获取部门树结构
            this.$get('/dept').then(res => {
                if (res) {
                    this.depList = res.rows.children
                    this.getInitDeptLabel(this.depList, this.addForm.form.deptId)
                }
            })
            // 获取角色列表
            this.$get('/role').then(res => {
                if (res) {
                    this.roleList = res.rows
                }
            })
        }
    }
}
</script>

<style lang="less">
.add-dialog {
    .el-form-item__content {
        display: -webkit-box;
    }
}
.user-add-dialog {
    .el-input {
        width: 320px !important;
    }
}
</style>
